<style lang="less">
@import './style.less';
</style>
<template>
    <el-container class="home">
        <el-aside width="250px"
                  class="sidebar">
            <div class="brand">
                <img class="logo"
                     :src="require('../../assets/images/logo.png')" />
                <div class="brand-txt">蝌蚪云平台管理系统</div>
            </div>
            <!-- 正常使用 v-has 权限指令(v-has="item.auId") -->
            <el-menu :default-active="sidebarSelectKey"
                     class="el-menu-ex"
                     @open="openMenu"
                     @select="selectMenu">
                <el-submenu v-for="item in permiData"
                            v-has="item.auId"
                            :key="item.page ? item.page: item.tag"
                            :index="item.page ? item.page: item.tag">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.title}}</span>
                    </template>
                    <el-menu-item v-for="subTitle in item.subTitle"
                                  v-has="subTitle.auId"
                                  :key="subTitle.page ? subTitle.page: subTitle.tag"
                                  :index="subTitle.page ? subTitle.page: subTitle.tag">
                        <i :class="subTitle.icon" />{{subTitle.title}}
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <div class="login-user">
                    <el-dropdown style="color: black;">
                        <span class="el-dropdown-link">
                            <span>{{loginUser.username}}</span>
                            <i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div @click="logoutUser">退出登录</div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <el-row>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="item in $route.meta.nodes"
                                            :key="item.page"
                                            :to="item.page">
                            {{item.title}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-row>
                <el-row class="content">
                    <router-view />
                    <!-- <keep-alive v-if="$route.meta.keepAlive">
                        <router-view />
                    </keep-alive> -->
                </el-row>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import pageConfig from './config'
    import comMx from '@/mixins/common'

    export default {
        name: 'home',
        mixins: [comMx],
        data() {
            return {
                sidebarSelectKey: this.sidebarSelectKey,
                // 权限数据
                permiData: pageConfig.permission,
                // 用户选择
                select: []
            }
        },
        computed: {
            ...mapGetters(['loginUser'])
        },
        watch: {
            $route: 'setSidebarStatus'
        },
        methods: {
            ...mapActions(['logout']),
            setSidebarStatus() {
                this.sidebarSelectKey = this.$route.path === '' ? 'home' : this.$route.path
            },
            // 打开菜单
            openMenu(e) {},
            // 选择条目
            selectMenu(path) {
                this.$router.push({
                    path: path
                })
            },
            breadcrumbClick(e) {
                console.log('breadcrumbClick')
            },
            logoutUser() {
                this.logout({ success: () => this.$router.push({ name: 'login' }) })
            }
        },
        mounted() {
            this.setSidebarStatus()
        }
    }
</script>
